<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span style="font-weight: bold;font-size: 20px">最新图书</span>
      <!--<el-button style="float: right; padding: 3px 0" type="text">修改</el-button>-->
    </div>
    <div class="block">
      <el-timeline>
        <el-timeline-item v-for="book in books" :key="book.id" v-bind:timestamp="book.date" placement="top">
          <el-card>
            <el-container>
              <el-aside width="160px"><img class="img"
                                           :src="book.cover"
                                           :fit="fits"></el-aside>
              <el-main>
                <font class="title">&nbsp;&nbsp;{{ book.title }}&nbsp;&nbsp;&nbsp;
                </font>
                <a href="#" class="author">{{ book.author }}&nbsp;&nbsp;&nbsp;著</a>
                <p class="abs">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ book.abs }}</p>
                <router-link :to="{path:'bookdetails',query:{id:book.id}}">
                <el-button type="warning" round>免费阅读</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
                <el-button type="danger" round>点赞  ♥</el-button>
                </router-link>
              </el-main>
            </el-container>

          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'UpdateCard',
  data() {
    return {
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      books: [],
    }
  },
  mounted() {
    var _this = this
    this.$axios.get('/BookList').then(resp => {
      if (resp && resp.data.statusCode === 200) {
        _this.books = resp.data.data.splice(0,3)
      }
    })
  }
}
</script>

<style scoped>
.box-card {
  margin-top: 5px;
  width: 988px;
  height: 1200px;
  text-align: left;
}

.img {
  width: 160px;
  height: 250px;
}

.title {
  vertical-align: top;
  height: 10px;
  font-size: 25px;
  font-weight: bold;
  line-height: 20px;
}

.author {
  vertical-align: top;
  top: 20px;
  height: 100px;
  font-size: 15px;
  font-weight: normal;
  line-height: 30px;
}

.abs {
  /*vertical-align: top;*/
  left: 200px;
  line-height: 25px;
}
</style>
